<template>
 <div class="rec">
     <scroller class="my-scroller"
          :on-infinite="infinite"
          :on-refresh = "refresh"
           ref="myScroller"
          >
           <panel :list="recList" class="panel"></panel>
       </scroller>
 </div>
</template>

<script>
let initLoaded = false

import Vue from 'vue'
import { Panel, Toast } from 'vux'
export default {
  name: 'rec',
  components: {
     Panel,
     Toast
  },
  data () {
    return {
      recList: [],
      page: 30,
    }
  },
  created(){
      this.$jsonp('http://3g.163.com/touch/jsonp/sy/recommend/20-29.html')
        .then(data => {
           console.log(data.focus);
            this.recList = data.focus.filter( item => {
                  return item.category == '推荐'
            }).map( item => {
                let src = '';
                item.picInfo[0] ?  src =  item.picInfo[0].url : src = '';
                return{
                  url: item.link,
                  title: item.title,
                  src: src,
                  desc:item.source+ ' ' + item.tag
                }
            })
           initLoaded = true  
        })
       
  },
  methods: {
      refresh(){
          this.recList.sort(()=>{
               return Math.random() -0.5
          })
         this.$refs.myScroller.finishPullToRefresh();
         this.$vux.toast.text('已刷新10条数据', 'default');

      },
      infinite(){
         if(!initLoaded){
            this.$refs.myScroller.finishInfinite();
            return
         }
         let n = this.page+9;
         setTimeout(()=>{
            this.$jsonp(`http://3g.163.com/touch/jsonp/sy/recommend/${this.page}-${n}.html`).then(data=>{
               console.log(data.list);
               let newdata =data.list.map(item => {
                   let src = '';
                   item.picInfo[0] ?  src =  item.picInfo[0].url : src = '';
                   return {
                      url: item.link,
                      title: item.title,
                      src: src,
                      desc:item.source+ ' ' + item.tag
                      }
               })
               this.recList = this.recList.concat(newdata);
                this.$refs.myScroller.finishInfinite();
               this.page += 10;
            })
         },1000)
        
      }
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>

     .rec {
        .my-scroller {
            .pull-to-refresh-layer { padding-top:79px;}
            .loading-layer { padding-bottom:60px;}     
       }
      
       .panel {
         .weui-media-box__bd .weui-media-box__title {
             white-space: normal;
         }
         
           .weui-media-box__hd,  .weui-media-box__hd img {
              width: 102px;
              height: 78px;
          }
          .weui-media-box_appmsg .weui-media-box__hd {
             width: 102px;
              height: 78px;
          }
          .weui-media-box__bd { height: 78px;}
         
         
       } 
     }
      
  
</style>
